@import '@/styles/var.less';
@import '@/styles/mixin.less';
.message {
  .self-center(fixed);
  z-index: 100;
  padding: 10px 20px;
  border-radius: 4px;
  color: #fff;
  display: flex;
  align-items: center;
  transition: 0.4s;
  transform: translate(-50%, -50%) translateY(25px);
  opacity: 0;
  white-space: nowrap;

  &-info {
    background-color: @primary;
  }

  &-success {
    background-color: @success;
  }

  &-warn {
    background-color: @warn;
  }

  &-error {
    background-color: @danger;
  }
}

.icon {
  font-size: 20px;
  margin-right: 6px;
}
